<template>
	<view class="contener">
		<skeleton :skeleton="skeleton" :loading="loading">
			<block>
				<view class="cartBox">
					<view class="cartList">
						<view class="" style="margin:25rpx 0; display: flex;">
							<view class="imgBox">
								<image :src="imgapi+product.avatar" style="width: 75px;height: 75px;margin-top: 6px;">
								</image>
							</view>
							<view class="rightBox">
								<view class="rightBoxtop ">
									{{product.title}}
								</view>
								
							</view>
						</view>
						<view class="cartBoxBot">
							<view>
								价格
							</view>
							<view>
								<text class="food-price" v-if="product.discountPrice">￥{{product.discountPrice}}</text>
								<text class="food-price" v-else>￥{{product.price}}</text>
							</view>
						</view>
						<view class="cartBoxBot" v-if="product.discount">
							<view>
								规格
							</view>
							<view>
								<text style="color: #999;font-size: 32rpx;">{{product.discount}}</text>
							</view>
						</view>
						<view class="cartBoxBot">
							<view>
								数量
							</view>
							<view style="text-align: right;width: 23%;">
								<numSelect model="1" @getValue="count" @addNum="add" @minusNum="minus" color="#1e9cde"
									:value="form.amount"></numSelect>
							</view>
						</view>
					</view>

				</view>
				<view class="cartBox">
					<view class="cartList">
						<view class="plotAddress">
							<text>个人地址</text>
							<view class="plotAddressBorder between  center_vertical" @tap="getaddress">
								<view>
									<image src="../../static/images/home/weizhi.png" class="icon_next" mode=""></image>
									<text style="margin-left: 10rpx;">{{getAddress}}</text>
								</view>
								<view>
									<image src="../../static/images/mine/icon_next.png" class="icon_next"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cartBox">
					<view class="cartList">
						<view class="plotAddress">
							<text>支付方式</text>
							<radio-group name="pay" @change="payWay">
								<view class="plotAddressBorder between">
									<view class="center_vertical">
										<view>
											<image src="../../static/images/growVegetables/pay_icon.png" class="icon">
											</image>
										</view>
										<view>
											微信支付
										</view>
									</view>
									<view>
										<radio value="wechat" />
									</view>
								</view>
								<view class="plotAddressBorder between">
									<view class="center_vertical">
										<view>
											<image src="../../static/images/growVegetables/wallet_icon.png"
												class="icon">
											</image>
										</view>
										<view>
											余额支付
										</view>
									</view>
									<view>
										<radio value="balance" />
									</view>
								</view>
							</radio-group>
						</view>
					</view>
				</view>
				<view class="cartBottom">
					<view class="allcount">总计:<text class="food-price"
							style="margin-left: 10rpx;">￥{{totalPrice}}</text>
					</view>
					<view class="rightbot">
						<view class="settlementBox" @click="subOrder">提交订单</view>
					</view>
				</view>
			</block>
		</skeleton>
	</view>
</template>

<script>
	import numSelect from '@/pageA/uni_modules/poiuy-numSelect/numSelect.vue'
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	export default {
		components: {
			numSelect,
			Skeleton,
		},
		data() {
			return {
				form: {
					id: "",
					amount: 0.0,
					img: [],
					remark: "",
					payWay: ""
				},
				getAddress: '请选择您的收货地址',
				base64Arr: [],
				product: {},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				weight: null,
				base64arr: [],
				checked: false,
				imgapi: "",
				mark: '',
				totalPrice: 0.00, //总价
				type: null,
				province: '',
				city: '',
				area: '',
				address: '',
				name: '',
				phone: '',

				loading: true,
				skeleton: [
					'square+line*2',
					'line*2',
					40,
					'line*2',
					40,
					'line*3',
				], //骨架屏
			}
		},
		onLoad(e) {
			this.imgapi = this.$reqConfig.URLIMAGE
			let detail = JSON.parse(decodeURIComponent(e.product));
			console.log('detail', detail)
			this.product = detail.productDetail
			this.product.plotAddress = detail.address
			this.form.id = this.product.id
			this.type = detail.type

			// 骨架屏取消
			this.loading = false;
		},
		methods: {
			//单选事件
			payWay(e) {
				console.log(e.detail.value)
				this.form.payWay = e.detail.value
			},
			getaddress() {
				let that = this
				wx.chooseAddress({
					success(res) {
						that.province = res.provinceName
						that.city = res.cityName
						that.area = res.countyName
						that.address = res.detailInfo
						that.name = res.userName
						that.phone = res.telNumber
						that.getAddress = that.province + that.city + that.area + that.address

					}
				})
			},
			//提交订单，点击提交订单按钮的时候加一个加载图标的全局遮罩，等请求完成后再放开
			subOrder() {
				if(this.product.inventory < this.form.amount && this.product.inventory != -1){
					uni.showToast({
						title: "该商品库存不足",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.form.amount == 0) {
					uni.showToast({
						title: "请输入重量",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.form.payWay) {
					uni.showToast({
						title: "请选择支付方式",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.province) {
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none',
						duration: 2000
					})
					return;
				}

				uni.showLoading({
						title: "订单提交中"
					}),
					this.$axios({
						url: `user/shopMall/subOrder`,
						method: "post",
						data: {
							id: this.form.id,
							type: this.type,
							count: this.form.amount,
							province: this.province,
							city: this.city,
							area: this.area,
							address: this.address,
							name: this.name,
							phone: this.phone
						}
					}).then((res) => {
						//这里取消遮罩，然后提示订单提交成功,再然后就跳转到支付页面，支付有微信支付和余额支付两种
						uni.hideLoading()
						if (res.code == 0) {
							uni.showToast({
								title: "订单提交成功",
								icon: 'none',
								duration: 2000
							})
							
							//成功提交执行对应操作
							if (this.form.payWay == "balance") {
								uni.showLoading({
										title: "余额支付中......"
									}),
									this.balancePay(res.result)

								//半秒缓冲，等到后端状态修改完成跳转
								setTimeout(function() {
									uni.hideLoading()
									//跳转到订单列表
									uni.redirectTo({
										url: '../mine/shopOrder'
									})
								}, 600);
							} else {
								console.log("微信支付")
							}
						}
					})
			},

			// 余额支付
			balancePay(orderNum) {
				let orderNumList = []
				orderNumList.push(orderNum)
				this.$axios({
					url: `user/shopMall/balancePay`,
					method: "post",
					data: {
						orderNumList: JSON.stringify(orderNumList),
					}
				}).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: "支付成功!",
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.result,
							icon: 'none',
							duration: 2000
						})
					}

				})
			},

			uploadPhotos() {
				let that = this
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: function(e) {
						console.log(e.tempFilePaths)
						//遍历数组，转化为base64类型并添加到base64arr数组里						
						e.tempFilePaths.forEach((item) => {
							if (that.form.img.length < 3) {
								that.base64Arr.push(item)
								that.form.img.push("data:image/jpeg;base64," + uni
									.getFileSystemManager().readFileSync(item, 'base64'))
							} else {
								uni.showToast({
									title: '最多可上传3张',
									icon: 'none',
									duration: 2000
								})
							}
						})
					}
				});
			},
			//计算总价
			count(e) {
				this.form.amount = e

				let price = this.product.discountPrice ? this.product.discountPrice : this.product.price
				//保留2位
				this.totalPrice = (this.form.amount * price).toFixed(2)
			},
			add(e) {
				console.log('加', e)
			},
			//添加至购物车
			minus(e) {
				console.log('减', e)
			},
			checkeds() {
				this.checked = !this.checked
				console.log('3333')
			}

		}
	}
</script>

<style scoped>
	.plotAddress {
		margin: 15rpx 15rpx 25rpx;
		font-size: 13px;
		text-align: left;
		/* color: #777777; */
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.cartBox {
		width: 750rpx;
		text-align: center;
		margin-top: 15rpx;
	}

	.cartBoxBot {
		display: flex;
		justify-content: space-between;
		margin: 15rpx 15rpx 25rpx;
		padding-top: 20rpx;
		border-top: 0.5rpx solid #eeeeee;
	}

	.icon_next {
		width: 30rpx;
		height: 30rpx;
		margin-top: 7rpx;
	}

	.plotAddressBorder {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 0.5rpx solid #eeeeee;
	}

	.cartBoxBot2 {
		display: flex;
		justify-content: space-between;
		margin: 15rpx 15rpx 25rpx;
		/* padding-top:20rpx; */
	}

	.cartList {
		width: 89vw;
		margin: 10rpx auto;
		/* height: calc(22vw + 34rpx); */
		border-radius: 12rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, .1);
		overflow: hidden;
		border: 0;
		position: relative;
		margin-bottom: 20rpx;
	}

	.phoFlex {
		display: flex;
		margin-left: 20rpx;
	}

	.checkboxBox {
		padding-left: 16rpx;
		flex-shrink: 0;
		height: 22vw;
		line-height: 22vw;
		margin-right: 16rpx;
		align-items: center;
		position: relative;
		width: 30rpx;
	}

	.imgBox {
		border: 2rpx solid #eee;
		width: 22vw;
		height: 22vw;
		flex-shrink: 0;
		margin-left: 15rpx;
		border-radius: 8rpx;
		overflow: hidden;
		margin-right: 10rpx;
		position: relative;
	}

	.rightBox {
		height: 22vw;
		width: 100%;
		padding-right: 15rpx;
		position: relative;
		margin-left: 12rpx;
	}

	.rightBoxtop {
		text-align: left;
		margin-top: 10rpx;
		font-size: 32rpx;
	}

	.food-btm {
		width: 70%;
		text-align: left;
		margin-top: 20rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.food-price {
		color: #f01414;
		font-size: 16px;
	}

	.photobtn {
		margin-left: 10rpx;
		height: 50rpx;
		font-size: 18rpx;
		width: 130rpx;
		line-height: 50rpx;
	}

	.cartBottom {
		padding-left: 20rpx;
		width: 750rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		height: 11vw;
		display: flex;
		align-items: center;
	}

	.allcount {
		color: #C4C4C4;
		margin-left: 20rpx;
	}

	.delBox {
		height: 9vw;
		width: 120rpx;
		border-radius: 30rpx;
		margin-right: 20rpx;
		line-height: 9vw;
		text-align: center;
		color: #fff;
		background-color: #C4C4C4;
	}

	.settlementBox {
		height: 9vw;
		width: 180rpx;
		padding: 0 50rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
		line-height: 9vw;
		text-align: center;
		color: #fff;
		background-color: #3cc51f;

	}

	.rightbot {
		margin-right: 15rpx;
		position: absolute;
		right: 0;
		display: flex;
	}

	.photoBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 680rpx;
		height: 130rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
	}
</style>
